<template>
  <div id="app">
    <router-view v-if="isActiveView"/>
  </div>
</template>

<script>
import { addClass, removeClass } from '@utils/element'
export default {
  name: 'AppRoot',
  provide () {
    return {
      $app: this
    }
  },
  data () {
    return {
      body: null,
      isActiveView: true
    }
  },
  mounted () {
    // 用于解决弹窗滚动穿透的问题
    this.body = document.querySelector('body')
  },
  methods: {
    /**
     * 隐藏body滚动条
     */
    hideBodyScroll () {
      addClass(this.body, 'noscroll')
    },
    /**
     * 显示body滚动条
     */
    showBodyScroll () {
      removeClass(this.body, 'noscroll')
    },
    /**
     * 手动刷新页面
     */
    reload () {
      if (this.$route.meta && this.$route.meta.isBack) {
        delete this.$route.meta.isBack
      }
      this.isActiveView = false
      this.$nextTick(() => {
        this.isActiveView = true
      })
    },
  }
}
</script>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>
